<script setup lang="ts">
import { ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessage, FormInstance } from "element-plus";
import { post } from "@/api/api";
import { typeList } from '@/utils'

const router = useRouter();
const route = useRoute();

const checked = ref(false);
const toPrev = () => {
  router.push("/home");
};
const formRef = ref<FormInstance>();
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  if (!checked.value) return ElMessage.warning("请先勾选协议");

  formEl.validate(async (valid) => {
    if (valid) {
      let params = {
        queryName: form.value.name,
        idCardNo: form.value.idCardNo,
        queryType: route.query.key,
        fileCode: form.value.fileCode,
      };
      let res = await post("/c/query/order/create", params);
      if (res && res.data) {
        router.push({path: "/auth", query: { key: route.query.key }});
      }
    } else {
      console.log("error submit!");
    }
  });
};
const form = ref({
  name: "",
  idCardNo: "",
  fileCode: "",
});

const handleSuccess = (response, uploadFile) => {
  console.log(response, uploadFile);
};

const dict_upload_request = (item) => {
  let formData = new FormData();
  formData.append("file", item.file); //上传的文件

  post("/c/file/upload", formData).then((res) => {
    form.value.fileCode = res.data.data?.code;
  });
};
const setType = (item) => {
    return typeList.filter((i) => { return item === i.key})[0]?.name
}
</script>

<template>
  <div class="my">
    <div class="my-top">
      <div class="my-nav">
        <img src="@/assets/toPrev.png" alt="" @click="toPrev()" />
        <div class="my-item">{{setType($route.query.key)}}查询</div>
      </div>
      <el-form
        ref="formRef"
        :model="form"
        label-width="auto"
        label-position="top"
        class="demo-ruleForm"
      >
        <el-form-item
          label="01 查询人姓名"
          prop="name"
          :rules="[{ required: true, message: '请输入姓名' }]"
        >
          <el-input
            v-model.number="form.name"
            type="text"
            placeholder="请输入"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item
          label="02 查询人身份证号"
          prop="idCardNo"
          :rules="[{ required: true, message: '请输入身份证号码' }]"
        >
          <el-input
            v-model.number="form.idCardNo"
            type="text"
            placeholder="请输入身份证号码"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item
          label="03 上传授权书"
          prop="idCardNo"
          :rules="[{ required: true }]"
        >
          <el-upload
                class="avatar-uploader"
                action=""
                accept=".png, .jpg, .jpeg"
                 :http-request="dict_upload_request"
                :on-success="handleSuccess"
            >
                <el-icon  class="avatar-uploader-icon">点击上传</el-icon>
                <span></span>
            </el-upload>
        </el-form-item>
        <el-form-item class="submit">
          <div class="xieyi">
            <el-checkbox v-model="checked"></el-checkbox>我已阅读和同意<a
              href="javascript:;"
              @click="$router.push('/auth')"
              >《不动产授权书》</a
            >
          </div>
          <el-button type="primary" @click="submitForm(formRef)"
            >提交</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<style scoped>
.my {
  background-color: #f6f6f6;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.my-nav {
  position: relative;
  padding-top: 25px;
  margin-bottom: 12px;
}
.my-nav img {
  position: absolute;
  left: 16px;
}
.my-top {
  padding-bottom: 16px;
}
.my-top img {
  width: 10px;
  display: inline-block;
  padding-top: 25px;
  padding-left: 5px;
  top: 0;
}
.my-item {
  text-align: center;
  width: 100%;
}
.my-item1 {
  margin: 0 12px;
  width: 55px;
  height: 30px;
  line-height: 30px;
  font-size: 13px;
  color: #666666;
}
.my-item2 {
  display: flex;
}
:deep(.el-button) {
  border-radius: 20px;
  margin-top: 6px;
}
.el-form-item {
  background: #fff;
  margin: 0 16px;
  border-radius: 8px;
  margin-top: 16px;
  padding: 16px;
}
.el-form-item:last-child {
  background: none;
}
.el-input {
  margin-left: 30px;
}

:deep(.el-form-item__label) {
  color: #000;
  font-weight: 600;
}
.submit {
  position: fixed;
  bottom: 20px;
  left: 0;
  right: 0;
  padding: 0;
}
.submit .el-button {
  width: 72%;
  margin: auto;
  background: #346efe;
}

.submit a {
  color: #346efe;
  text-decoration: none;
}

:deep(.el-checkbox__inner) {
  border-radius: 50%;
  margin-right: 3px;
}

:deep(.el-upload) img {
  width: 100%;
  height: 100%;
}

.xieyi {
  text-align: center;
  width: 100%;
  margin-bottom: 10px;
}

:deep(.el-upload) {
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border: 1px solid #999;
  height: 100px;
  margin-left: 34px;
  background: #f6f6f6;
  width: 100%;
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 16px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
  font-style: normal;
}
</style>
